<template>
    <div class="card-wrap">
        <a-card>
            <template #title>
                【{{ deviceName }}】{{ identifierName }}
                <span :style="{ fontSize: '8px', color: '#0E42D2' }">{{
                    specsDesc
                }}</span>
            </template>
            <template #extra>
                <!-- <a-link @click="fnOpenChartDialog()">
                    <chart-line-area
                        theme="multi-color"
                        size="16"
                        :fill="['#2F88FF', '#2F88FF', '#FFF', '#43CCF8']"
                    />
                </a-link> -->
                <a-link @click="fnRemoveChartWrap"><icon-close /></a-link>
            </template>
            <a-spin dot :loading="loading" style="width: 100%">
                <div>
                    <a-empty v-show="chartDataEmpty" />
                    <div v-show="!chartDataEmpty">
                        <Chart
                            height="300px"
                            :option="chartOption"
                            group="chartDevice"
                        ></Chart>
                    </div>
                </div>
            </a-spin>
        </a-card>
    </div>
</template>

<script setup lang="ts">
    import useChartOption from '@/hooks/chartOption';
    import useLoading from '@/hooks/loading';
    import { reactive, ref } from 'vue';
    import { connect, disconnect } from 'echarts/core';
    import { getDevicePropertyHisList } from '../service';

    const props = defineProps({
        dataIndex: {
            type: Number,
            default: 0,
        },
        deviceId: {
            type: Number,
            default: 0,
        },

        deviceName: {
            type: String,
            default: '',
        },
        identifier: {
            type: String,
            default: '',
        },
        identifierName: {
            type: String,
            default: '',
        },
        dataRange: {
            type: Array as () => string[],
        },
        specsUnit: {
            type: String,
            default: '',
        },
        specsDesc: {
            type: String,
            default: '',
        },
    });
    const { loading, setLoading } = useLoading();
    const chartDataEmpty = ref(true);
    const xAxis = ref<string[]>([]);
    const chartsData = ref<string[]>([]);
    const emit = defineEmits(['removeChartWrap']);
    const formData = reactive({
        dateRange: props.dataRange as unknown as string[2],
    });
    console.log(props.specsUnit);
    const { chartOption } = useChartOption(() => {
        return {
            tooltip: {
                trigger: 'axis',
                // formatter: `{b0}<br />{a}{c0}${props.specsUnit}`,
                valueFormatter: (value) => value + props.specsUnit,
            },
            xAxis: {
                data: xAxis.value,
            },
            grid: {
                left: '8%',
                right: '5%',
                bottom: '3%',
                top: '13%',
                containLabel: true,
            },
            yAxis: {},
            series: [
                {
                    name: props.identifierName,
                    type: 'line',
                    data: chartsData.value,
                },
            ],
            toolbox: {
                show: false,
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                    },
                    myTool2: {
                        show: true,
                        title: '导出Excel',
                        icon: 'image://https://echarts.apache.org/zh/images/favicon.png',
                        onclick() {
                            alert('myToolHandler2');
                        },
                    },
                },
            },
        };
    });
    const fnRemoveChartWrap = () => {
        emit('removeChartWrap', props.deviceId, props.identifier);
    };
    const fetchChartData = async () => {
        setLoading(true);
        const params = {
            current: 1,
            deviceId: props.deviceId,
            identifier: props.identifier,
            startTime: formData.dateRange[0],
            endTime: formData.dateRange[1],
            queryType: 'newest',
            showStyle: 'chart',
        };
        try {
            const data = await getDevicePropertyHisList(params);
            const { result } = data as any;

            xAxis.value.length = 0;
            chartsData.value.length = 0;
            result.records.forEach(
                (aa: { occurredTime: string; value: string }) => {
                    xAxis.value.push(aa.occurredTime);
                    chartsData.value.push(aa.value);
                }
            );
            disconnect('chartDevice');
            connect('chartDevice');
            chartDataEmpty.value = chartsData.value.length === 0;
        } catch (err) {
            // you can report use errorHandler or other
        } finally {
            setLoading(false);
        }
    };
    function loadData(data: any) {
        Object.assign(formData, data);
        fetchChartData();
    }
    fetchChartData();
    defineExpose({
        loadData,
    });
</script>
